<template>
  <div class="folder_frame" @touchstart.stop="no" @touchstop.stop="no">
    <Split v-model="split1">
      <div slot="left" class="demo-split-pane" style="height:100%">
        <el-tree ref="tree" style="height:100%;overflow-y: auto;overflow-x: hidden;" @node-click="handleClick"
          :highlight-current="true" lazy :load="loadNode" accordion :props="defaultProps" :expand-on-click-node="false"
          node-key="fileId" @node-contextmenu="showLeftMenu"
          :default-expanded-keys="[meta_file ? meta_file.fileId : (rootFile ? rootFile.fileId : null)]">
        </el-tree>
      </div>
      <div slot="right" style="height:100%">
        <FolderTable :node="tableData" :process="process"></FolderTable>
      </div>
    </Split>
  </div>
</template>

<script>
import FolderTable from '../foldermanager/FolderTable'
import { mapState } from "vuex";
export default {
  name: "FolderManager",
  props: {
    process: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      defaultProps: {
        label: "fileName",
        isLeaf: "isleaf"
      },
      split1: 0.18,
      rootFile: null,
      file_selected: null,
      tableData: new Object()
    };
  },
  components: {
    FolderTable
  },
  created() {
    // 进入加载状态
    this.process.isLoading = true;
  },
  computed: {
    ...mapState("userAbout", ["user", "token"]),
    meta_file() {
      if (this.process.meta && this.process.meta.file != null) {
        return this.process.meta.file
      } else {
        return null
      }
    }
  },
  mounted() {
    this.__init()
  },
  methods: {
    loadNode(node, resolve) {
      // console.log(node.level)
      if (node.level == 0) {
        // 进行根节点渲染
        this.loadRootFile(resolve)
        return
      }
      else {
        // 进行加载
        this.$basicAxios(this.$ms.getSonFile(node.data.fileId, this.token), (resp) => {
          resp.data.data.forEach(e => {
            e.isleaf = e.fileType == 1
            e.fileType = e.fileType == 1 ? '文件' : '文件夹'
            e.isShow = false
          })
          resolve(resp.data.data)
          if (node.level == 1) this.handleClick(null, node)
        })
      }
    },
    loadRootFile(__resolve) {
      // 加载数据
      if (this.meta_file) {
        // 加载完毕
        this.rootFile = this.meta_file
        //   console.log(this.rootFile)
        __resolve([this.rootFile])
        // 并且默认打开下一层
        this.process.isLoading = false;
        return
      }
      this.$basicAxios(this.$ms.getSonFile(-1, this.token), (resp) => {
        this.rootFile = resp.data.data
        //this.file_selected = resp.data.data[0]
        // 防止意外的渲染
        __resolve(this.rootFile)
        // 数据同步
        this.process.isLoading = false;
      })
    },
    handleClick(data, node) {
      if (node.data.fileType == '文件') {
        // 文件则展示详细信息
        this.$basicAxios(this.$ms.get_file_detail(node.data.fileId, this.token), (resp) => {

        })
      } else {
        if (node.childNodes && node.childNodes.length > 0) {
          this.tableData = node
          this.$pubsub.publish(`getMeta:${this.process.process_id}`, { name: 'node', data: node })
          return
        }
        const tree = this.$refs.tree
        this.$basicAxios(this.$ms.getSonFile(node.data.fileId, this.token), (resp) => {
          resp.data.data.forEach(e => {
            e.isleaf = e.fileType == 1
            e.fileType = e.fileType == 1 ? '文件' : '文件夹'
            e.isShow = false
            tree.append(e, node)
          })
        })
        this.tableData = node
        this.$pubsub.publish(`getMeta:${this.process.process_id}`, { name: 'node', data: node })
      }
    },
    __init() {
      // 注册删除节点
      this.$pubsub.subscribe(`deleteNode:${this.process.process_id}`, this.deleteNode)
      this.$pubsub.subscribe(`appendNode:${this.process.process_id}`, this.appendNode)
    },
    deleteNode(name, data) {
      this.$refs.tree.remove(data)
    },
    appendNode(name, obj) {
      this.$refs.tree.append(obj.data, obj.node)
    },
    showLeftMenu(event, data, node, vc) {
      //  console.log(data)
    }
  },
  beforeDestroy() {
    this.$pubsub.unsubscribe(`deleteNode:${this.process.process_id}`)
    this.$pubsub.unsubscribe(`appendNode:${this.process.process_id}`)
  },
  watch: {

  }
}
</script>

<style>
.folder_frame {
  width: 100%;
  height: 100%;
}
</style>